<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import { ywsl } from "@/api/zhufang";
import 存量房网签备案进度查询 from "@/assets/业务受理/存量房网签备案进度查询.svg"
defineOptions({
  name: "Zhufang"
});
const router = useRouter(); // 获取 router 实例
const active = ref(0);
// 公示公告
const ywsl_page = ref(1); // 页码
const ywsl_limit = ref(10); // 每页条数
const ywsl_list = ref([]); // 存储列表数据
const ywsl_loading = ref(false); // 加载状态
const ywsl_finished = ref(false);
const ywsl_refreshing = ref(false);
const ywsl_onLoad = async () => {
  if (ywsl_refreshing.value) {
    ywsl_page.value = 1
    ywsl_list.value = [];
    ywsl_refreshing.value = false;
  }
  ywsl_loading.value = true;
  const response = await ywsl({ page: ywsl_page.value, limit: ywsl_limit.value });
  console.log(response);
  if (response.code == 1) {
    ywsl_page.value++
    response.data.forEach(item => {
      ywsl_list.value.push({
        ...item,
        icon_url: '~@/assets/业务受理/' + item.title + '.svg'
      });
    });
    ywsl_loading.value = false;
    if (ywsl_list.value.length >= 1) {
      ywsl_finished.value = true;
    }
    console.log('ywsl_list', ywsl_list);
  } else {
    ywsl_finished.value = true;
  }
};
const ywsl_onRefresh = () => {
  // 清空列表数据
  ywsl_finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  ywsl_loading.value = true;
  ywsl_onLoad();
};



// 组件挂载时调用多个方法
onMounted(async () => {

});
// 跳转详情页
const goToDetail = async (url) => {
  // router.push(`/zhufang-detail/${id}/${type}`); // 路由跳转
  window.open(url, '_blank');
}

</script>

<template>
  <div>
    <!-- 
    <div style="
      position: fixed;
      margin-top: 124px;
      margin-left: 24px;
      color: white;
      font-size: 24px;
      font-weight: bold;
    ">住建一码通服平台</div> -->
    <div style="">
      <img style="
      position: absolute;
      margin-top: 140px;
      margin-left: 24px;
      width: 260px;" alt="" src="~@/assets/住建一码通服务平台拷贝1.png" />
      <img class="block w-[1920px] h-[220px] mx-auto mb-[3px] pt-[0px]"
        style="border-radius: 0 0 12px 12px; /* 调整圆角大小 */" alt="" src="~@/assets/congtai.png" />
    </div>
    <van-cell-group inset style="margin-top: -48px;">
      <van-tabs v-model:active="active">
        <van-tab title="业务受理">
          <van-pull-refresh v-model="ywsl_refreshing" @refresh="ywsl_onRefresh">
            <van-list v-model:loading="ywsl_loading" :finished="ywsl_finished" finished-text="没有更多了"
              @load="ywsl_onLoad">
              <van-cell v-for="(item, index) in ywsl_list" :key="index" :title="item.title"
                @click="goToDetail(item.toUrl)" class=" custom-cell">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <van-row>
                    <van-col span="6">
                      <div style="height: 80px; width: 80px; padding: 10px 0 0 10px;">
                        <img style="height: 60px; width: 60px;" :src="item.icon" />
                      </div>
                    </van-col>
                    <van-col span="16">
                      <van-row style="margin-top: 20px;">
                        <span style="font-size: 16px; font-weight: bold;">{{ item.title }}</span>
                      </van-row>
                    </van-col>
                    <van-divider />
                  </van-row>
                </template>
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                  <div style="padding-top: 34px;">
                    <van-icon name="arrow" />
                  </div>
                </template>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </van-cell-group>
  </div>
</template>

<style scoped>
/* 覆盖 title 的宽度 */
/* /deep/ .custom-cell .van-cell__title {
  width: 236px; 
  flex: none;  
} */
::v-deep .custom-cell .van-cell__title,
.custom-cell .van-cell__value {
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出隐藏 */
  text-overflow: ellipsis;
  /* 超出用省略号表示 */
}
</style>
